<template>
    <div class="mr-content">
      <hpeade>
         <span class="s">动漫图片{{$route.params.name}}漫画壁纸美图下载</span> 
      </hpeade>
       <div class="zheng">
           <img :src=shuzu.images alt="">
           <h2>动漫图片{{shuzu.label}}漫画壁纸美图下载</h2>
           <div class="content">
               <img :src=shu.images alt="">
              <p><span id="span">{{shu.name}}</span> <span>{{shuzu.showTime}}</span></p>
           </div>
       </div>
       <div class="tuijian">
           <h2>相关推荐</h2>
           <p>{{shuzu.label}}</p>
       </div>
        <div class="content2"  v-for="n in list">
         
            <div class="fuimg">
                    <img :src=n.images class="img3" alt="">
                   
             </div>
             <div class="nei">
                  <p>动漫图片{{n.label}}漫画壁纸美图下载</p>
                        <img :src=n.userIDInfo.images id="san" alt="">
                        <span id="si">{{n.userIDInfo.name}}</span>
               </div>
            
            </div>  
            <loading v-if="showload"></loading>
    </div>
      
</template>
<script>
    import Hpeade from '../components/Head'
    import Loading from '../components/Loding'
    export default{
        components:{
            Hpeade,Loading
        },
        data(){
         return{
        showload:true,
         shuzu:{},
         shu:{},
         list:[]
         }
        },
        created(){
           this.axios.get(`https://api.maimengjun.com/index.php?r=prettyImages/detail&id=${this.$route.params.id}&withPraise=0&withLabel=1`)
           .then(data=>{
               this.shuzu=data.data.results
               console.log(this.shuzu)
               this.shu=this.shuzu.userIDInfo
            //    console.log(this.shu)
             this.list=this.shuzu.relativeList
             console.log(this.list)
              setTimeout(() => {
                  this.showload = false
                },2000)
           })
            .catch(err=>{

            }) 
           
        }
    }
</script>
<style scoped>
   #si {
        display: inline-block;
        position: relative;
        top: -0.1rem;
   }
    #san {
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
    }
      .img3 {
        width: 4rem;
        height: 4rem;
        margin-left: 0.47rem;
    }
      .content2{
           display: inline-block;
           width: 5rem;
           color: gray;
       }
    .nei{
           width: 4rem;
           margin-left: 0.48rem;
       }
       .nei>p{
           font-weight: bolder;
       }
.tuijian>h2{
    margin-left: 0.5rem;
}
.tuijian>p{
    margin: 0.2rem 0 0.3rem 0.5rem;
    line-height: 0.6rem;
    width:1.5rem;
    text-align: center;
    border-radius:7px; 
    background: #ff4f65;
    color: white;
}
 #span{
    font-size: 0.4rem;
    margin-right: 0.5rem;   
 }
 .content>p{
     position: relative;
     top:-0.6rem;
     left:1rem;
 }
 .content span{
      display: inline-block;
     color: #ccc;
 }
.content>img{
    width:0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}
.content{
    margin-top: 0.5rem;
     margin-left: 0.5rem;
}
 .zheng{
     margin-top: 1rem;
 }
  .zheng>img{
      width:100%;
  }
  .zheng>h2{
      margin-left: 0.5rem;
  }
    .s{
        display: inline-block;
        position: relative;
        left:1.7rem;
        top: 0.2rem;
        font-size: 0.4rem;
          color: #ff4f65;
        font-weight: bolder;
        width:3.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
       
    }
 
   
</style>